<template>
  <el-form
    :model="storeForm"
    :rules="basicRules"
    ref="storeForm"
    size="small"
    label-width="120px"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <!-- <el-form-item label="服务商:" prop="inNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.inNo"
            placeholder="默认为登录账户所属服务商"
            filterable
            clearable
            :disabled="disabled"
          >
            <el-option
              v-for="item in serviceNoList"
              :key="item.serviceNo"
              :label="item.serviceName"
              :value="item.serviceNo"
            >
              <span style="float: left">{{ item.serviceName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.serviceNo }}</span>
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="服务商:" prop="inNo">
          <select-page :params="{serviceAuditStatus:2}" ref="searchSerSelect" label="serviceName" value="serviceNo" :select.sync="storeForm.inNo" :url="website.searchLink.serviceUrl" placeholder-text="服务商" filter-key="searchParam"></select-page>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="24">
        <el-form-item label="设备归属:" prop="belongTo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.belongTo"
            placeholder="设备归属默认为瑞生意"
            filterable
          >
            <el-option
              v-for="item in belongToList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="通道名称:" prop="aisleCode">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.aisleCode"
            placeholder="通道默认为瑞生意"
            filterable
          >
            <el-option
              v-for="item in aisleCodeList"
              :key="item.aisleCode"
              :label="item.aisleName"
              :value="item.aisleCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <!-- <el-col :span="8">
        <el-form-item label="设备类型:" prop="rptNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.rptNo"
            placeholder="请选择设备类型"
            filterable
          >
            <el-option
              v-for="item in rptNoList"
              :key="item.rptNo"
              :label="item.rptName"
              :value="item.rptNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <!-- <el-col :span="12">
        <el-form-item label="设备品牌:" prop="rpsNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.rpsNo"
            placeholder="请选择设备品牌"
            filterable
            clearable
            @change="rpsChange"
          >
            <el-option
              v-for="item in rpsNoList"
              :key="item.rpsNo"
              :label="item.rpsName"
              :value="item.rpsNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备型号:" prop="rpmNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.rpmNo"
            placeholder="请选择设备型号"
            filterable
            clearable
          >
            <el-option
              v-for="item in rpmNoList"
              :key="item.rpmNo"
              :label="item.rpmName"
              :value="item.rpmNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="设备编号" prop="rsSn">
          <el-input
            size="small"
            type="text"
            v-model="storeForm.rsSn"
            placeholder="请输入设备编号"
            @change="rsSnChange"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="simAmountShow == '1'">
        <el-form-item label="流量卡金额" prop="simAmount">
          <el-input-number v-model="storeForm.simAmount" @blur="showMsg()" controls-position="right" style="width:100%;" :precision="2" :step="0.01" :min="0" ></el-input-number>
        </el-form-item>
      </el-col>

      <!-- <el-col :span="24">
        <div class="stock-input">
          <el-form-item label="设备编号:" prop="startSn">
            <el-input
              size="small"
              v-model="storeForm.startSn"
              placeholder="请输入起始设备编号"
              onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            ></el-input>
          </el-form-item>
        </div>
        <div class="stock-input-interval">至</div>
        <div class="stock-input">
          <el-form-item label="" label-width="0" prop="endSn">
            <el-input
              size="small"
              v-model="storeForm.endSn"
              placeholder="请输入末尾设备编号"
              onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            ></el-input>
          </el-form-item>
        </div>
      </el-col> -->
      <!-- <el-col :span="24">
        <el-form-item label="二维码编号" prop="qrCode">
          <el-input
            size="small"
            type="text"
            v-model="storeForm.qrCode"
            placeholder="请输入二维码编号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="活动类型:" prop="activeType">
          <el-input
            size="small"
            v-model="storeForm.activeType"
            placeholder="请输入起始活动类型"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="物联网卡编号" prop="cardCode">
          <el-input
            size="small"
            type="text"
            v-model="storeForm.cardCode"
            placeholder="请输入物联网卡编号"
          ></el-input>
        </el-form-item>
      </el-col> -->
    </el-row>
  </el-form>
</template>

<script>
import {
  // getSelectAisleList,
  // selectTypeList,
  selectSupList,
  selectModelList,
  queryMerchantRenewMoney,
  queryModelByStore
} from "@/api/rb-oem/store/store";
// import {
//   getList as getServiceList
// } from "@/api/rb-oem/serviceinfo/service_info";
import {
  getServiceList
} from "@/api/rb-oem/terminal/terminal";
// import { getDictionary } from "@/api/system/dict";

// import { uploadPublic } from "@/api/system/oss";
import selectPage from "@/components/select-page/select-page";

export default {
  components: {
    selectPage
  },
  props: {
    storeForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    stockType: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isShowStatus: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      basicRules: {
        inNo: [
          { required: true, message: "请选择服务商", trigger: "blur" },
        ],
        // belongTo: [
        //   { required: true, message: "请选择设备归属", trigger: "blur" },
        // ],
        // aisleCode: [{ required: true, message: "请选择通道", trigger: "blur" }],
        rptNo: [
          { required: true, message: "请选择设备类型", trigger: "blur" },
        ],
        // rpsNo: [
        //   { required: true, message: "请选择设备品牌", trigger: "blur" },
        // ],
        // rpmNo: [
        //   { required: true, message: "请选择设备型号", trigger: "blur" },
        // ],
        rsSn: [
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
        // startSn: [
        //   { required: true, message: "请输入起始设备编号", trigger: "blur" },
        // ],
        // endSn: [
        //   { required: true, message: "请输入截止设备编号", trigger: "blur" },
        // ],
        // activeType: [
        //   { required: true, message: "请输入活动类型", trigger: "blur" },
        // ],
        // cardCode: [
        //   { required: true, message: "请输入物联网卡编号", trigger: "blur" },
        // ],
        // qrCode: [
        //   { required: true, message: "请输入二维码编号", trigger: "blur" },
        // ],
        simAmount: [
          { required: true, message: "请输入流量卡金额", trigger: ["blur","change"] },
        ]
      },
      serviceNoList: [],
      aisleCodeList: [],
      // belongToList: [],
      // rptNoList: [],
      rpsNoList: [],
      rpmNoList: [],
      isShow: true,
      simAmountShow:'',
      getSimAmount:1
    };
  },
  computed: {
    rptsValue() {
      // rptNo——设备类型 rpsNo——设备品牌(供应商)
      const { rptNo, rpsNo } = this.storeForm;
      return {
        rptNo,
        rpsNo
      }
    }
  },
  watch: {
    'storeForm.rptNo'(val) {
      if (val) {
        this.storeForm.rpsNo = '';
        this.storeForm.rpmNo = '';
        this.getSupList(val)
      }
    },
    // rptsValue(data) {
    //   if (data) {
    //     if (!data.rpsNo) {
    //       this.storeForm.rpmNo = '';
    //     }
    //     if (data.rptNo && data.rpsNo) {
    //       this.storeForm.rpmNo = '';
    //       this.getModelList(data.rptNo, data.rpsNo)
    //     }
    //   }
    // },
  },
  created() {
    this.doGetDicts();
  },
  methods: {
    // 流量卡奖励提示
    showMsg(){
      if(this.storeForm.simAmount > this.getSimAmount){
        this.$confirm(`流量卡奖励金额最大设置: ${ this.getSimAmount }元`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton:false,
          type: 'warning'
        }).then(() => {
          this.storeForm.simAmount = this.getSimAmount;
        }).catch(() => {
          this.storeForm.simAmount = this.getSimAmount;      
        });
      }
    },
    /* 设备编号 change */
    rsSnChange(value){
      if (value) {
        queryModelByStore({rsSn: value, rptNo: this.storeForm.rptNo}).then((res) => {
          this.storeForm.rpsNo = res.data.data.rpsNo;
          if (this.storeForm.rpsNo) {
            this.getModelList(this.storeForm.rptNo, this.storeForm.rpsNo.rpsNo);
            this.storeForm.rpmNo = res.data.data.rpmNo;
          } else {
            this.storeForm.rpmNo = "";
            this.rpmNoList = [];
          }
        });
        if (this.stockType == 'pos') {
          queryMerchantRenewMoney(value).then((res) => {
            const data = res.data.data;
            this.simAmountShow = data.isShow;
            if(this.simAmountShow != '1'){
              this.getSimAmount = 0;
            }else{
              this.getSimAmount = data.simAmount;
              this.storeForm.simAmount = data.simAmount;
            }
          })
        }
      }
    },
    /* 设备品牌 change */
    rpsChange(value) {
      if (value) {
        this.storeForm.rpmNo = '';
        this.getModelList(this.storeForm.rptNo, value);
      } else {
        this.storeForm.rpmNo = '';
        this.rpmNoList = [];
      }
    },
    /* 字典 */
    doGetDicts() {
      // getServiceList({isSelectDirect: '1'}).then((res) => {
      //   this.serviceNoList = res.data.data.records;
      //   // this.serveNoList = res.data.data.records;
      // });
      /* getSelectAisleList(-1, -1).then((res) => {
        this.aisleCodeList = res.data.data;
      }); */
      // selectTypeList(-1, -1).then((res) => {
      //   this.rptNoList = res.data.data;
      // });
      this.getSupList(this.storeForm.rptNo);
      /* getDictionary({ code: "belong_to" }).then((res) => {
        this.belongToList = res.data.data;
      }); */
    },
    /* 通过设备类型 获取设备品牌数据 */
    getSupList(rptNo) {
      selectSupList(-1, -1, {rptNo}).then((res) => {
        this.rpsNoList = res.data.data;
      });
    },
    /* 通过设备类型及设备品牌 获取设备型号数据 */
    getModelList(rptNo, rpsNo) {
      this.rpmNoList = [];
      selectModelList(-1, -1, {rptNo, rpsNo}).then((res) => {
        this.rpmNoList = res.data.data;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.stock-flex {
  display: flex;
  align-items: center;
  // justify-content: center;
  justify-content: space-between;
}

.stock-input {
  width: calc(100% / 2 - 25px);
  display: inline-block;
}
.stock-input-interval {
  width: 50px;
  text-align: center;
  display: inline-block;
}

/deep/ .el-input-number.is-controls-right .el-input__inner {
  text-align: left !important;
}
</style>